<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>飘扬的旗帜</title>
		<style>
			body {
				background-color: #f5f5f5;
				font-family: Arial, sans-serif;
				color: #333;
				margin: 0;
				padding: 2rem;
				min-height: 100vh;
				box-sizing: border-box;
			}
			.container {
				max-width: 1200px;
				margin: 0 auto;
			}
			main {
				display: grid;
				grid-template-columns: 1fr;
				gap: 2rem;
			}
			@media (min-width: 768px) {
				main {
					grid-template-columns: 1fr 1fr;
				}
			}
			.card {
				background-color: white;
				border-radius: 12px;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
				padding: 1.5rem;
			}
			#flag-container {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 300px;
				background-color: #f9f9f9;
				border-radius: 8px;
				overflow: hidden;
			}
			.controls {
				display: grid;
				gap: 1.5rem;
			}
			.control-group {
				display: flex;
				flex-direction: column;
			}
			.control-group label {
				font-size: 0.9rem;
				color: #555;
				margin-bottom: 0.5rem;
			}
			.control-group input,
			.control-group select {
				padding: 0.7rem;
				border: 1px solid #ddd;
				border-radius: 6px;
				font-size: 1rem;
			}
			.range-value {
				display: flex;
				justify-content: space-between;
				font-size: 0.8rem;
				color: #777;
				margin-top: 0.3rem;
			}
			button {
				background-color: #165dff;
				color: white;
				border: none;
				border-radius: 6px;
				padding: 0.8rem;
				font-size: 1rem;
				cursor: pointer;
				transition: background-color 0.2s;
			}
			button:hover {
				background-color: #0047cc;
			}
			footer {
				text-align: center;
				color: #888;
				font-size: 0.9rem;
				margin-top: 3rem;
			}
			:root {
				--billow: 0px;
			}
			@keyframes oscillate {
				from {
					transform: translateY(var(--billow));
				}
				to {
					transform: translateY(calc(var(--billow) * -1));
				}
			}
			.flag {
				display: flex;
				aspect-ratio: 3 / 2;
			}
			.column {
				flex: 1;
				animation: oscillate 500ms alternate infinite ease-in-out both;
			}
			.column:first-child {
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
			}
			.column:last-child {
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<main>
				<!-- 旗帜展示区 -->
				<div class="card">
					<div id="flag-container"></div>
				</div>
				<!-- 控制面板 -->
				<div class="card">
					<h2>自定义旗帜</h2>
					<div class="controls">
						<div class="control-group">
							<label>旗帜宽度 (px)</label>
							<input
								type="range"
								id="width"
								min="100"
								max="400"
								step="10"
								value="300"
							/>
							<div class="range-value">
								<span>100px</span>
								<span id="width-value">300px</span>
								<span>400px</span>
							</div>
						</div>
						<div class="control-group">
							<label>列数</label>
							<input
								type="range"
								id="numOfColumns"
								min="5"
								max="30"
								step="1"
								value="15"
							/>
							<div class="range-value">
								<span>5</span>
								<span id="columns-value">15</span>
								<span>30</span>
							</div>
						</div>
						<div class="control-group">
							<label>飘扬延迟 (ms)</label>
							<input
								type="range"
								id="staggeredDelay"
								min="20"
								max="300"
								step="10"
								value="100"
							/>
							<div class="range-value">
								<span>20ms</span>
								<span id="delay-value">100ms</span>
								<span>300ms</span>
							</div>
						</div>
						<div class="control-group">
							<label>飘扬幅度</label>
							<input
								type="range"
								id="billow"
								min="0"
								max="3"
								step="0.1"
								value="1.5"
							/>
							<div class="range-value">
								<span>0</span>
								<span id="billow-value">2</span>
								<span>3</span>
							</div>
						</div>
						<button id="regenerate-btn">更新旗帜</button>
					</div>
				</div>
			</main>
		</div>
		<script>
			const COLORS = {
				rainbow: [
					"hsl(0, 100%, 50%)", // 赤
					"hsl(30, 100%, 50%)", // 橙
					"hsl(60, 100%, 50%)", // 黄
					"hsl(120, 100%, 25%)", // 绿
					"hsl(180, 100%, 50%)", // 青
					"hsl(240, 100%, 50%)", // 蓝
					"hsl(270, 100%, 50%)", // 紫
				],
			};
			function generateGradientString(colors) {
				const numOfColors = colors.length;
				const segmentHeight = 100 / numOfColors;
				const gradientStops = colors.map((color, index) => {
					const from = index * segmentHeight;
					const to = (index + 1) * segmentHeight;

					return `${color} ${from}% ${to}%`;
				});
				return `linear-gradient(to bottom, ${gradientStops.join(", ")})`;
			}
			function generateFlag(options = {}) {
				const {
					variant = "rainbow",
					width = 300,
					numOfColumns = 15,
					staggeredDelay = 100,
					billow = 2,
				} = options;
				const flagContainer = document.getElementById("flag-container");
				flagContainer.innerHTML = "";
				const colors = COLORS[variant];
				const friendlyWidth = Math.round(width / numOfColumns) * numOfColumns;
				const firstColumnDelay = (numOfColumns - 1) * staggeredDelay * -0.5;
				const flag = document.createElement("div");
				flag.className = "flag";
				flag.style.width = `${friendlyWidth}px`;
				flagContainer.appendChild(flag);
				for (let i = 0; i < numOfColumns; i++) {
					const column = document.createElement("div");
					column.className = "column";
					column.style.setProperty("--billow", `${(i + 1) * billow}px`);
					column.style.background = generateGradientString(colors);
					column.style.animationDelay = `${
						firstColumnDelay + i * staggeredDelay
					}ms`;
					flag.appendChild(column);
				}
			}
			function updateValueDisplays() {
				document.getElementById("width-value").textContent = `${
					document.getElementById("width").value
				}px`;
				document.getElementById("columns-value").textContent =
					document.getElementById("numOfColumns").value;
				document.getElementById("delay-value").textContent = `${
					document.getElementById("staggeredDelay").value
				}ms`;
				document.getElementById("billow-value").textContent =
					document.getElementById("billow").value;
			}
			document.addEventListener("DOMContentLoaded", () => {
				generateFlag();
				updateValueDisplays();
				const sliders = document.querySelectorAll('input[type="range"]');
				sliders.forEach((slider) => {
					slider.addEventListener("input", updateValueDisplays);
				});
				document
					.getElementById("regenerate-btn")
					.addEventListener("click", () => {
						const width = parseInt(document.getElementById("width").value);
						const numOfColumns = parseInt(
							document.getElementById("numOfColumns").value
						);
						const staggeredDelay = parseInt(
							document.getElementById("staggeredDelay").value
						);
						const billow = parseFloat(document.getElementById("billow").value);

						generateFlag({
							variant: "rainbow",
							width,
							numOfColumns,
							staggeredDelay,
							billow,
						});
					});
			});
		</script>
	</body>
</html>
